<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>红满堂职位介绍</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/screen.css">

  </head>
  <body>
      <div class="header">
        <div class="container">       
          <div class="head">
              <div class="logo">
                  <h2 class="text-center text">亲爱的红薯er，欢迎参加红满堂工作室本学期招新</h2><br/><br/>
                  <h3 class="text-center text">
                      红满堂工作室是一个立志于为华农师生服务的校一级学生组织
                  </h3>
              </div>
          </div>
          <nav class="">
            <ul class="nav nav-tabs">
              <li role="presentation"><a href="index.html" target="_blank">首页</a></li>
              <li role="presentation" class="active"><a href="#">职位介绍</a></li>
              <li role="presentation"><a href="massage.php" target="_blank">我要报名</a></li>
              <li role="presentation"><a href="#" data-toggle="modal" data-target="#about">关于我</a></li>
            </ul>
          </nav>
        </div>        
      </div>

      <div class="mainbody">
        <div class="container">
          <div class="row">
            <div class="col-md-8">
             <div class="article">
                <div class="tittle">
                  <a href=""><h4>开发类</h4></a>
                </div>
                <div class="content">
                    <p>小时候，我以为地球是绕着我转的，长大后我才发现，果然是。</p>
                </div>
              </div>
              <div class="article">
                <div class="tittle">
                  <a href=""><h4>设计类</h4></a>
                </div>
                <div class="content">
                    <p>小时候，我以为地球是绕着我转的，长大后我才发现，果然是。</p>
                </div>
              </div>
              <div class="article">
                <div class="tittle">
                  <a href=""><h4>版主</h4></a>
                </div>
                <div class="content">
                    <p>小时候，我以为地球是绕着我转的，长大后我才发现，果然是。</p>
                </div>
              </div>
              <div class="article">
                <div class="tittle">
                  <a href=""><h4>运营</h4></a>
                </div>
                <div class="content">
                    <p>小时候，我以为地球是绕着我转的，长大后我才发现，果然是。</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="master">
                <h3 class="text-center">红满堂简介</h3>
                <div class="contr">
                  <p>红满堂工作室是一个立志于为华农师生服务的校一级学生组织，主要业务包括BBS、二手市场、校园微媒体及其它如捅奶牛、PaaS等WEB应用。</p>
                </div>
              </div>

              <div class="connect">
                <h4 class="text-center" style="color:blue">联系我</h4>
                <ul>
                  <li><a href=""><img src="image/qq.png" alt="QQ"></a></li>
                  <li><a href=""><img src="image/txwb.png" alt="腾讯微博"></a></li>
                  <li><a href=""><img src="image/xlwb.png" alt="新浪微博"></a></li>
                  <li><a href="mailto:979228516@qq.com"><img src="image/email.png" alt="邮箱"></a></li>
                </ul>
              </div>
          </div>
        </div>
      </div>

      <div class="footer">
        <p class="text-center">Design by：少年</p>
      </div>

<div class="modal fade" id="about">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">关于我</h4>
      </div>
      <div class="modal-body">
        <p>我是红满堂</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">知道啦</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.2.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>